<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="16vw" style="background-color: bisque;">

        <el-row class="tac">

          <el-col>
            <el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#000" @select="handleSelect"
              active-text-color="#000" :default-active="$store.state.active">

              <div class="logo" style="display: flex;justify-content: center;align-items: center;margin: 35px auto;">
                <img src="../../public/logo/logo(1).png" style="width: 160px;" />
                <!-- <img src="../../public/logo/Logo.png" /> -->
              </div>

              <el-menu-item v-for="(item, i) in Menu" :key="item.index + i" :index="item.index"
                style="width: 80%;margin: 5px auto; border-radius: 8px; display: flex; align-items: center;">
                <i :class="[item.icon]"></i>
                <span style="font-size: 17px; font-weight: bold;">{{ item.name }}</span>
              </el-menu-item>

            </el-menu>
          </el-col>

        </el-row>
      </el-aside>
      <el-container>
        <el-main style="background-color: #fff;height: 100vh;margin: 0;padding: 0;">
          <router-view @transfer="change" />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {
      Menu: [],
      teacherMenu:
        [
          { index: "/home/publishjob", icon: "el-icon-edit-outline", name: '发布作业' },
          { index: "/home/assignmentManage", icon: "el-icon-s-management", name: '作业管理' },
          { index: "/home/tcorrent", icon: "el-icon-document-checked", name: '批改作业' },
          { index: '/home/studentCorrectStatus', icon: 'el-icon-tickets', name: "学生作业批改情况" },
          { index: "/home/teachercourse", icon: "el-icon-collection", name: '我的课程' },
          { index: "/home/teachercentre", icon: "el-icon-user", name: '个人中心' },
          // { index: "/home/evaluate", icon: "el-icon-data-line", name: '教师评价' },
          // { index: "/home/panel", icon: "el-icon-pie-chart", name: '仪表盘' },
          { index: "/home/message", icon: "el-icon-bell", name: '消息中心' },
        ],
      studentMenu:
        [
          { index: "/home/submitjob", icon: "el-icon-edit-outline", name: '提交作业' },
          { index: "/home/studentcourse", icon: "el-icon-collection", name: '我的课程' },
          { index: "/home/studentcentre", icon: "el-icon-user", name: '个人中心' },
          // { index: "/home/evaluate", icon: "el-icon-data-line", name: '教师评价' },
          // { index: "/home/panel", icon: "el-icon-pie-chart", name: '仪表盘' },
          { index: "/home/message", icon: "el-icon-bell", name: '消息中心' },
        ],
      // active: '',
    }
  },
  methods: {
    // 跳转通知页
    change(msg) {
      console.log(msg);
      this.active = msg;
    },
    // 路由跳转
    handleSelect(key, keyPath) {
      this.$router.push(
        {
          path: key,
          // query: { id: keyPath[0] }
        }
      )
      this.active = key;
    }
  },
  async mounted() {
    let reslut = await this.$axios.post("/login/userInfo", { user_info: localStorage.getItem("userInfo") });
    this.$store.commit("setUser", reslut.user_info);
    // 如果想要使用那么就通过JSON进行深度遍历
    console.log(JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth);
    if (JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth == 'student_per') {
      this.Menu = this.studentMenu
    }
    else if (JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth == 'teacher_per') {
      this.Menu = this.teacherMenu
    }
    // //当前路由
    // if (this.$route.path == '/home/detail' || this.$route.path == '/home/addcourses') {
    //   this.active = JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth == 'student_per' ? '/home/studentcourse' : '/home/teachercourse';
    // } else if (this.$route.path.includes("submit") || this.$route.path.includes("lookwork")) {
    //   this.active = "/home/submitjob";
    // } else if (this.$route.path.includes("correct") || this.$route.path.includes("cabbage")) {
    //   this.active = JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth == 'student_per' ? '/home/correct' : '/home/tcorrent';
    // } else if (this.$route.path.includes("evalute")) {
    //   this.active = "/home/evaluate";
    // } else if (this.$route.path.includes("centre")) {
    //   this.active = JSON.parse(JSON.stringify(this.$store.state.user_info)).user_auth == 'student_per' ? '/home/studentcentre' : '/home/teachercentre';
    // } else {
    //   this.active = this.$route.path;
    // }
    // this.active = this.$route.path;
    // console.log(this.active);
    console.log(this.$store.state.active);
  }
}

</script>

<style scoped>
.el-menu-vertical-demo {
  width: 15.9vw;
  height: 100vh;
  margin: 0 auto;
  border-right: 1px solid #ccc;
}

.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1);
}

.el-menu-item.is-active {
  background-color: #CCEABB !important;
}
</style>
